<template>
	<view>
		<view class="top">
			<view class="">
				<view class="top1">
					付款给个人
				</view>
				<view class="top2">
					一条团团
				</view>
			</view>
			<image style="width: 80rpx;height: 80rpx;" src="/static/ren-1.png" mode=""></image>
		</view>
		<view class="box">
			<view class="" style="width: 20rpx;height: 10rpx;"></view>



			<view class="box1">
				<view class="box1text">
					金额
				</view>
				<view class="box1-1">
					<view class="box1-1text">
						￥
					</view>
					<!-- <input class="box1-1text" type="number" v-model="money"> -->
					<view class="box1-1text">
						{{money}}
					</view>
				</view>
				<view class="box1text2" @click="toggle('center')">
					添加备注
				</view>
			</view>
		</view>
		<mono-keyboard @change="change" :show="show"></mono-keyboard>

		<uni-popup ref="popup" background-color="#fff">
			<view class="popup1">
				<view class="popup1-1">
					添加备注
				</view>
				<view class="popup1-2">
					<input type="text">
				</view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	import monokeyboard from '@/components/mono-keyboard/mono-keyboard.vue';
	export default {
		components: {
			monokeyboard
		},
		name: 'keybord',
		data() {
			return {
				keyList: [1, 2, 3, 4, 5, 6, 7, 8, 9, '.', 0],
				valList: [],
				temList: [],
				keyS: 's10',
				money: '',
				keyReplce: 'x',
				show: true,
				keyEntText: '确定',
				ShowKeyBoard: false
			}
		},
		methods: {
			change(e) {
				this.money = e
				console.log(this.money);
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			getKeyValue(item) {
				this.valList.push(item);
				//console.log(this.valList);  
			},
			delKeyValue() {
				let del_in = this.valList.length - 1;
				this.valList.splice(del_in, 1);
				//console.log(this.valList);  
			},
			cloKeyBoard() {
				this.ShowKeyBoard = false;
			},
			entKeyValue() {
				this.temList = this.valList;
				let resNum = this.temList.join("");
				console.log(resNum);
			},
			openKeyBoard(value) {

				if (!value || value == 's10') {
					this.ShowKeyBoard = true;
				}

				if (value == 's20') {
					this.keyS = value;
					this.ShowKeyBoard = true;
				}

				if (value == 's30') {
					this.keyS = value;
					this.ShowKeyBoard = true;
				}

				if (value == 's40') {
					this.keyEntText = '支付';
					this.ShowKeyBoard = true;
				}

				if (value == 's50') {
					this.keyS = value;
					this.ShowKeyBoard = true;
				}

			}
		},
		watch: {
			ShowKeyBoard: function() {
				if (this.ShowKeyBoard) {

				} else {
					this.keyEntText = '确定';
					this.keyS = 's10';
				}
			}
		},
		mounted: function() {

		},
		created: function() {

		}
	}
</script>

<style>
	.top {
		width: 80%;
		margin: 0rpx auto;
		padding: 40rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top1 {
		font-size: 32rpx;
		font-weight: 1000;
	}

	.top2 {
		margin-top: 10rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	.box {
		background-color: white;
		border-radius: 30rpx;
		height: 60vh;
	}

	.box1 {
		width: 80vw;
		margin: 20rpx auto;
	}

	.box1text {
		font-size: 28rpx;
		font-weight: 500;
	}

	.box1-1 {
		display: flex;
		border-bottom: #efefef solid 1rpx;
	}

	.box1-1text {
		font-size: 48rpx;
		font-weight: 1000;
	}

	.box1text2 {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #43579999;
	}

	.popup1 {
		width: 80vw;

	}

	.popup1-1 {
		padding: 20rpx;
	}

	.popup1-2 {
		background-color: #999999;
	}
</style>
